<template>
  <div class="travelPlan">
    <div class="herder">
      <span class="fixL"></span>
      <span class="fixR"></span>
    </div>
    <div class="tit">
      我的买买买计划
      <span>買い物を買う</span>
    </div>
    <form class="mui-input-group">
      <div class="mui-input-row">
        <label>ss</label>
        <input type="text" v-model="country" placeholder="我要去">
      </div>
      <div class="mui-input-row">
        <label>ss</label>
        <input v-model="date" type="text" readonly @click="pickerVisible=!pickerVisible" class="mui-input-clear" placeholder="请选择日期" data-input-clear="5">
        <span class="mui-icon mui-icon-clear mui-hidden"></span>
      </div>

      <div class="mui-input-row">
        <input type="text" class="mui-input-clear" placeholder="附近地点：大手盯三井花园酒店" data-input-clear="5">
        <span class="mui-icon mui-icon-clear mui-hidden"></span>
      </div>

      <div class="mui-button-row">
        <button type="button" @click="addTravel" class="mui-btn mui-btn-primary" onclick="return false;">创建行程，去逛逛</button>
      </div>
      <div></div>
    </form>
    <div class="tit">
      <div class="mytravel">
        <span :class="{'active':active}" @click="travel">我的行程</span>
        <div v-show="bor" class="bor"></div>
      </div>
      <div class="shopHis">
        <span :class="{'active':!active}" @click="history">购物历史</span>
        <div v-show="!bor" class="bor"></div>
      </div>
      <span class="right">排序</span>
    </div>
    
    <router-view></router-view>
    <transition name="picker">
      <div class="pickerDate" v-show="pickerVisible" >
        <div class="btnTit">
          <span @click="pickerVisible=!pickerVisible">确定</span>
        </div>
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
      </div>
    </transition>
    
  </div>
</template>

<script>
import {Toast} from "mint-ui"
export default {
  name: 'HelloWorld',
  data () {
    return {
      slots: [
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'center',
          defaultIndex:0
        },
        {
          flex: 1,
          values: [1,2,3,4,5,6,7,8,9,10,11,12],
          className: 'slot2',
          defaultIndex:0,
          textAlign: 'center'
        },
        {
          flex: 1,
          values: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
          className: 'slot2',
          defaultIndex:0,
          textAlign: 'center'
        }
      ],
      pickerVisible:false,
      date:'',
      country:'',
      bor:true,
      active:true
    }
  },
  methods:{
    onValuesChange(picker, values) {
      console.log(values)
      this.date = values[0]+'-'+values[1]+'-'+values[2]
    },
    initYear(){
      var date = new Date().getFullYear()
      var month = new Date().getMonth()
      var day = new Date().getDate()
      console.log(day)
      this.slots[1].defaultIndex = month
      this.slots[2].defaultIndex = day-1
      for(var i=0;i<6;i++){
        this.slots[0].values[i] = date++
      }
    },
    addTravel(){
      if(!this.country){
        Toast('请填写去的国家');
        return
      }
      if(!this.date){
        Toast('请选择时间');
        return
      }
    },
    travel(){
      this.bor=true
      this.active=true
      this.$router.push({name:'myTravel'})
    },
    history(){
      this.active=false
      this.bor=false
      this.$router.push({name:'shopHistory'})
    }
  },
  created(){
    this.initYear()
    console.log(this)
    if(this.$route.path=='/travel/travelPlan/shopHistory'){
      this.active=false
      this.bor=false
    }else{
      sthis.bor=true
      this.active=true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.travelPlan{
  width:100%;
  height:100%;
  background: #FFFFFF;
  
  .mui-input-group:before,.mui-input-group:after{
    background: #fff;
  }
  .pickerDate{
    position: fixed;
    bottom:0;
    width:100%;
    background: #ccc;
    left:0;
    .btnTit{
      width:100%;
      height:35px;
      background: #666;
      position: absolute;
      top:0px;
      z-index: 999999999;
      text-align: right;
      span{
        color: #fff;
        margin-top:6px;
        display: block;
        margin-right: 5px;
      }
    }
    .picker{
      
      .picker-items{
        .picker-slot{
          text-align: center !important;
        }
      }
    }
    .mint-button--default{
     
    }
    .mint-button--primary{
     
    }
  }
  .mui-input-group{
    &:after{
        height:0;
      }
    .mui-input-row{
      border-radius:10px;
      border: 1px solid #E7E7E7;
      height:46px;
      margin-bottom: 20px;
      label{
        width:5%;
      }
      &:after{
        height:0;
      }
    }
    .mui-button-row{
      padding: 0;
      height:auto;
      .mui-btn-primary{
        width:90%;
        height:45px;
        padding: 0;
        border-radius: 100px;
        background: #FDDF00;
        border: none;
        outline-color: none;
        font-size: 14px;
        color: rgba(51,51,51,0.85);
        letter-spacing: 0.1px;
        text-align: center;
        font-weight: 700;
        margin: 25px 0;
      }
    }
  }
  .bor{
    background: #FDDF00;
    border: 1px solid #3B3B3B;
     border-radius: 100px;
     width:16px;
     height:8px;
     margin-top: 3px;
     margin-left: 32px;
  }
 
}

// 动画
.picker-enter,.picker-leave-to{
  transform: translateY(200px);
}
.picker-enter-active,.picker-leave-active{
  transition: all .5s ease-in-out;
}

</style>
